<template>
  <div class="sub-nav">
    <slot></slot>

    <div class="toggle-sub-nav" @click="toggleSubNav">
      <div class="toggle-sub-nav-inner">
        <div class="toggle-sub-nav-bg"></div>
        <div class="toggle-sub-nav-handler">
          <i class="toggle-icon-left iconfont icon-weibiaoti26"></i>
          <i class="toggle-icon-right iconfont icon-weibiaoti26"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'sub-nav',
    computed: {
      ...mapGetters({
        subNavCollapse: 'subNavCollapse'
      })
    },
    methods: {
      toggleSubNav () {
        this.$store.dispatch('collapseSubNav', !this.subNavCollapse)
      }
    }
  }
</script>

<style lang="less">
  #app {
    &.nav-collapse {
      .sub-nav {
        left: 60px;
      }
    }

    &.sub-nav-collapse {
      .sub-nav {
        transform: translateX(-100%);
      }

      .toggle-sub-nav {
        right: -20px;
        left: auto;

        .toggle-sub-nav-bg {
          top: 0;
          left: 0;
          border-bottom: 9px solid transparent;
          border-left: 13px solid #CBD1DB;
          border-top: 9px solid transparent;
        }
      }
    }
  }

  /* 默认不折叠 */
  .sub-nav {
    transform: translateX(0);
    width: 150px;
    position: fixed;
    left: 210px;
    top: 60px;
    bottom: 0;
    background: #fff;
    padding: 15px 0;
    transition: left .2s;
    z-index: 99;
    overflow-x: hidden;
    overflow-y: auto;
    h1 {
      margin: 1px 20px 12px 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #EFF2F6;
      font-size: 14px;
      font-weight: normal;
    }
    .ivu-menu-item {
      padding: 8px 24px
    }
  }

  .toggle-sub-nav {
    position: absolute;
    left: 120px;
    top: 50%;
    width: 20px;
    height: 39px;
    z-index: 3;
    transition: all 0.2s ease;

    .toggle-sub-nav-inner {
      top: -50%;
      position: relative;
      overflow: hidden
    }

    .toggle-sub-nav-bg {
      width: 0;
      height: 22px;
      position: absolute;
      right: 0;
      left: auto;
      border-bottom: 9px solid transparent;
      border-left: none;
      border-right: 13px solid #CBD1DB;
      border-top: 9px solid transparent;
      transition: all 0.1s ease,0.1s ease;
    }
  }
</style>
